import React, { Component } from 'react'
import { Card ,Icon, Layout} from "antd";
import { Statistic } from "antd";
const {  Content } = Layout;
export default class index extends Component {
    render() {
        return (
            <div>
                <Content>
          <div
            style={{
              background: "#ECECEC",
              padding: "30px",
              width: "calc(100vw - 300px)",
              display: "flex",
              justifyContent: "space-between",
            }}
          >
            <Card
              title="本季度违约人数上升比例"
              bordered={false}
              style={{ width: 300 }}
            >
              <Statistic
                title="Up"
                value={11.28}
                precision={2}
                valueStyle={{ color: "#3f8600" }}
                prefix={<Icon type="arrow-up" />}
                suffix="%"
              />
            </Card>
            <Card
              title="本季度违约人数下降比例"
              bordered={false}
              style={{ width: 300 }}
            >
              <Statistic
                title="Down"
                value={9.3}
                precision={2}
                valueStyle={{ color: "#cf1322" }}
                prefix={<Icon type="arrow-down" />}
                suffix="%"
              />
            </Card>
            <Card
              title="本季度违约人数"
              bordered={false}
              style={{ width: 300 }}
            >
              <Statistic title="单位(人)" value={11} />
            </Card>
            <Card title="未处理任务数" bordered={false} style={{ width: 300 }}>
              <Statistic title="单位(条)" value={15} />
            </Card>
          </div>
        </Content>
            </div>
        )
    }
}
